import { Link } from 'react-router-dom'
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, PieChart, Pie, Cell, LineChart, Line } from 'recharts'
import { TrendingUp, Users, FileText, Activity, Archive, Upload, Plus } from 'lucide-react'
import './Dashboard.css'

const Dashboard = () => {
  // Sample data for charts
  const barData = [
    { name: '一月', value: 400 },
    { name: '二月', value: 300 },
    { name: '三月', value: 500 },
    { name: '四月', value: 280 },
    { name: '五月', value: 390 },
    { name: '六月', value: 320 }
  ]

  const pieData = [
    { name: '文档', value: 400, color: '#6366f1' },
    { name: '图片', value: 300, color: '#8b5cf6' },
    { name: '视频', value: 200, color: '#06b6d4' },
    { name: '其他', value: 100, color: '#10b981' }
  ]

  const lineData = [
    { name: '周一', value: 120 },
    { name: '周二', value: 190 },
    { name: '周三', value: 300 },
    { name: '周四', value: 250 },
    { name: '周五', value: 400 },
    { name: '周六', value: 350 },
    { name: '周日', value: 280 }
  ]

  const stats = [
    { title: '总用户数', value: '12,345', icon: Users, color: '#6366f1' },
    { title: '资源总数', value: '8,976', icon: FileText, color: '#8b5cf6' },
    { title: '活跃度', value: '89%', icon: Activity, color: '#06b6d4' },
    { title: '增长率', value: '+23%', icon: TrendingUp, color: '#10b981' }
  ]

  return (
    <div className="dashboard">
      <div className="dashboard-header">
        <div className="header-content">
          <h1>仪表盘</h1>
          <p>欢迎回到智汇宝管理系统</p>
        </div>
        <div className="header-actions">
          <Link to="/resource-library" className="quick-action-btn">
            <Archive size={20} />
            资源库
          </Link>
          <Link to="/resource-import" className="quick-action-btn primary">
            <Plus size={20} />
            导入资源
          </Link>
        </div>
      </div>

      {/* Stats Cards */}
      <div className="stats-grid">
        {stats.map((stat, index) => {
          const Icon = stat.icon
          return (
            <div key={index} className="stat-card">
              <div className="stat-icon" style={{ backgroundColor: stat.color }}>
                <Icon size={24} color="white" />
              </div>
              <div className="stat-content">
                <h3>{stat.value}</h3>
                <p>{stat.title}</p>
              </div>
            </div>
          )
        })}
      </div>

      {/* Charts Section */}
      <div className="charts-grid">
        {/* Bar Chart */}
        <div className="chart-card">
          <h3>月度统计</h3>
          <ResponsiveContainer width="100%" height={300}>
            <BarChart data={barData}>
              <CartesianGrid strokeDasharray="3 3" stroke="#334155" />
              <XAxis dataKey="name" tick={{ fill: '#94a3b8' }} />
              <YAxis tick={{ fill: '#94a3b8' }} />
              <Tooltip
                contentStyle={{
                  backgroundColor: '#1e293b',
                  border: '1px solid #334155',
                  borderRadius: '8px',
                  color: '#e2e8f0'
                }}
              />
              <Bar dataKey="value" fill="#6366f1" />
            </BarChart>
          </ResponsiveContainer>
        </div>

        {/* Pie Chart */}
        <div className="chart-card">
          <h3>资源分布</h3>
          <ResponsiveContainer width="100%" height={300}>
            <PieChart>
              <Pie
                data={pieData}
                cx="50%"
                cy="50%"
                outerRadius={80}
                dataKey="value"
                label={({ name, percent }) => `${name} ${(percent * 100).toFixed(0)}%`}
                labelStyle={{ fill: '#e2e8f0', fontSize: '12px' }}
              >
                {pieData.map((entry, index) => (
                  <Cell key={`cell-${index}`} fill={entry.color} />
                ))}
              </Pie>
              <Tooltip
                contentStyle={{
                  backgroundColor: '#1e293b',
                  border: '1px solid #334155',
                  borderRadius: '8px',
                  color: '#e2e8f0'
                }}
              />
            </PieChart>
          </ResponsiveContainer>
        </div>

        {/* Line Chart */}
        <div className="chart-card full-width">
          <h3>周活跃度趋势</h3>
          <ResponsiveContainer width="100%" height={300}>
            <LineChart data={lineData}>
              <CartesianGrid strokeDasharray="3 3" stroke="#334155" />
              <XAxis dataKey="name" tick={{ fill: '#94a3b8' }} />
              <YAxis tick={{ fill: '#94a3b8' }} />
              <Tooltip
                contentStyle={{
                  backgroundColor: '#1e293b',
                  border: '1px solid #334155',
                  borderRadius: '8px',
                  color: '#e2e8f0'
                }}
              />
              <Line type="monotone" dataKey="value" stroke="#8b5cf6" strokeWidth={3} />
            </LineChart>
          </ResponsiveContainer>
        </div>
      </div>
    </div>
  )
}

export default Dashboard
